<template>
    <div class="car" ref="swiper">
        <!-- <div></div> -->
        <p ref="ritem" v-for="(item, index) in newlist" @touchstart="touchStart($event)"
            @touchmove="touchMove($event)" @touchend="touchEnd($event)"
            :style="{backgroundImage: 'url('+ item.src +')'}">{{index}}</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            startX: '',
            moveX: '',
            list: [
                { src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.ljml_WxWeTbqv1yuzuhEDgHaD8?w=342&h=182&c=7&r=0&o=5&dpr=1.25&pid=1.7' },
                { src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.ljml_WxWeTbqv1yuzuhEDgHaD8?w=342&h=182&c=7&r=0&o=5&dpr=1.25&pid=1.7' },
                { src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.ljml_WxWeTbqv1yuzuhEDgHaD8?w=342&h=182&c=7&r=0&o=5&dpr=1.25&pid=1.7' },
                { src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.EHqC7e-3saBwZAXmyi66mQHaEK?w=325&h=182&c=7&r=0&o=5&dpr=1.25&pid=1.7' },
                { src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.EHqC7e-3saBwZAXmyi66mQHaEK?w=325&h=182&c=7&r=0&o=5&dpr=1.25&pid=1.7' },
                { src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.EHqC7e-3saBwZAXmyi66mQHaEK?w=325&h=182&c=7&r=0&o=5&dpr=1.25&pid=1.7' },
            ],
            contenter: this.$refs.swiper,
            active: -1,
            off: true,
            autoplay: 1000,
            start: null,

        }
    },
    mounted: function () {
        this.$nextTick(() => {
            this.backlate();
            this.backtime();
            this._autoplay()

        })
    },

    computed: {
        //生成新的图片组合
        newlist: function () {
            this.list.push(this.list[0]);
            this.list.unshift(this.list[(this.list.length - 2)]);
            return this.list;
        }
    },
    methods: {
        //图片移动
        backlate(offert) {
            let _that = this;
            if (!offert) offert = 0;
            (this.list).forEach((item, index) => {
                this.$refs.ritem[index].style.transform = 'translate3d(' + ((index + this.active) * _that.$refs.ritem[index].clientWidth + offert) + 'px,0,0)'
            })
        },
        //图片移动时间
        backtime(duration) {
            if (!duration) duration = '0ms';
            (this.$refs.ritem).forEach((item) => {
                item.style.webkitTransition = duration
                item.style.transition = duration;
            })
        },
        touchStart(e) {
            this.startX = e.touches[0].pageX;
        },
        touchMove(e) {
            e.preventDefault()
            e.stopPropagation()
            this.moveX = e.touches[0].pageX - this.startX;
            this.backlate(this.moveX)

        },
        touchEnd(e) {
            this.backtime('300ms');
            if (this.moveX > 100) {
                this.backlate(this.$refs.ritem[0].clientWidth)
                this.active++;
            } else if (this.moveX < -100) {
                this.backlate(-this.$refs.ritem[0].clientWidth)
                this.active--;
            }

            this.setactive(this.active)
            setTimeout(() => {
                this._autoplay()
            })
        },
        //循环滚动处理
        setactive(active) {
            if (active == 0) {
                this.active = -6
            } else if (active == -7) {
                this.active = -1
            } else {
                return false;
            }
            this.backtime()
            setTimeout(() => {
                this.backlate()
            }, 300)

        },
        next() {
            this.backtime('300ms');
            this.active--;
            this.backlate()
            this.setactive(this.active)
        },
        _autoplay() {
            if (this.autoplay != '') {
                this.cleartime()
                this.start = setTimeout(() => {
                    this.next()
                    this._autoplay()
                }, this.autoplay)
            }
        },
        cleartime() {
            clearTimeout(this.start)
            this.start = null;
        }

    }
}
</script>
<style lang="scss">
.car {
    width: 100%;
    height: 100%;
    position: relative;

    p {
        position: absolute;
        width: 100%;
        flex: 1;
        height: 100%;
        background-size: 100%;
        text-align: center;
        font-size: 30px;
        color: #fff;
        line-height: 500px;
    }
}
</style>